<!DOCTYPE html>
<html lang="en">
<head>
<title>About</title>
<!-- for-mobile-apps -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="" />
<script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false);
		function hideURLbar(){ window.scrollTo(0,1); } </script>
<!-- //for-mobile-apps -->
<link href="{{ url_for('static', filename='css/bootstrap.css') }}" rel="stylesheet" type="text/css" media="all" />
<link href="{{ url_for('static', filename='css/style.css') }}" rel="stylesheet" type="text/css" media="all" />
<link href="{{ url_for('static', filename='css/font-awesome.css') }}" rel="stylesheet"> 
<!--web-fonts-->
<link href="http://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet">
<link href="http://fonts.googleapis.com/css?family=Lato:300,400,700" rel="stylesheet">
<link href="http://fonts.googleapis.com/css?family=Tangerine:400,700" rel="stylesheet">
<!--//web-fonts-->
</head>
<body>
<!-- banner -->
	<div class="banner inner-bg-w3" id="home">
		<!-- header -->
		<div class="banner-top">
			<div class="social-bnr-agileits">
				<ul>
					<li><a href="#"><i class="fa fa-facebook" aria-hidden="true"></i></a></li>
					<li><a href="#"><i class="fa fa-twitter" aria-hidden="true"></i></a></li>
					<li><a href="#"><i class="fa fa-google-plus" aria-hidden="true"></i></a></li>
					<li><a href="#"><i class="fa fa-linkedin" aria-hidden="true"></i></a></li>					
				</ul>
			</div>
			<div class="contact-bnr-w3-agile">
				<ul>
					<li><i class="fa fa-envelope" aria-hidden="true"></i><a href="mailto:info@example.com">INFO@EXAMPLE.COM</a></li>
					<li><i class="fa fa-phone" aria-hidden="true"></i>+1 (100)222-23-33</li>	
					<li>
						<div class="search">
							<input class="search_box" type="checkbox" id="search_box">
							<label class="icon-search" for="search_box"><span class="glyphicon glyphicon-search" aria-hidden="true"></span></label>
							<div class="search_form">
								<form action="#" method="post">
									<input type="search" name="Search" placeholder="Search..." required="" />
									<input type="submit" value="Send" />
								</form>
							</div>
						</div>
					</li>
				</ul>
			</div>
			<div class="clearfix"></div>
		</div>
		<header>
			<div class="container">

			<!-- navigation -->
			<div class="w3_navigation">
			<nav class="navbar navbar-default">
				<div class="navbar-header navbar-left">
					<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
						<span class="sr-only">Toggle navigation</span>
						<span class="icon-bar"></span>
						<span class="icon-bar"></span>
						<span class="icon-bar"></span>
					</button>
					<div class="w3_navigation_pos">
						<h1><a href="index"><span>D</span>elish <span>F</span>ood</a></h1>
					</div>
				</div>
				<!-- Collect the nav links, forms, and other content for toggling -->
				<div class="collapse navbar-collapse navbar-right" id="bs-example-navbar-collapse-1">
					<nav class="menu menu--miranda">
						<ul class="nav navbar-nav menu__list">
							<li class="menu__item"><a href="index" class="menu__link">Home</a></li>
							<li class="menu__item menu__item--current"><a href="about" class=" menu__link">About</a></li>
							<li class="menu__item"><a href="services" class=" menu__link">Services</a></li>
							<li class="menu__item"><a href="gallery" class=" menu__link">Gallery</a></li>
							<li class="dropdown menu__item">
						<a href="#" class="dropdown-toggle menu__link"  data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Pages<span class="caret"></span></a>
						<ul class="dropdown-menu">
							<li><a href="codes">Short Codes</a></li>
							<li><a href="icons">Icons</a></li>
						</ul>
					</li>
							<li class="menu__item"><a href="contact" class=" menu__link">Contact</a></li>
						</ul>
					</nav>
				</div>
			</nav>	
	</div>
	<div class="clearfix"></div>
		<!-- //navigation -->
			</div>
		</header>
	<!-- //header -->
	</div>
<!-- //banner -->
<!-- about-top -->
	<div class="agile-about-top">
		<div class="container">
		<h2 class="tittle-w3">About<span>Us</span></h2>
			<div class="about-section">
				<div class="col-md-7 ab-left">
				  <div class="grid">
			        <div class="h-f">
					<figure class="effect-jazz">
					<img src="{{ url_for('static', filename='images/s1.jpg') }}" alt="img25">
						<figcaption>
							<h4>Delicious <span>Food</span></h4>
							<p>Etiam quis quam auctor, cursus ipsum a, placerat dui.</p>
						</figcaption>			
					</figure>
					
				 </div>
				 <div class="h-f">
					<figure class="effect-jazz">
						<img src="{{ url_for('static', filename='images/s2.jpg') }}" alt="img25">
						<figcaption>
							<h4>Delicious <span>Food</span></h4>
							<p>Etiam quis quam auctor, cursus ipsum a, placerat dui.</p>
							
						</figcaption>			
					</figure>
					
				 </div>
				 <div class="clearfix"> </div>
				 </div>
			   </div>
			   <div class="col-md-5 ab-text">
			        <h3 class="tittle-w3"><span>A brief history of </span>about us</h3>
					<p>Etiam quis quam auctor, cursus ipsum a, placerat dui. Aliquam erat volutpat. Donec bibendum viverra commodo. Morbi erat est, fringilla id sollicitudin sed, hendrerit nec est. Fusce maximus scelerisque turpis vel tempus
					<span>Morbi scelerisque a dolor vel feugiat. Nunc volutpat, magna in interdum commodo, magna orci venenatis risus, eu congue dolor ante quis eros.</span></p>
				</div>
				<div class="clearfix"> </div>
			 </div>
		</div>
	</div>
	<!-- //about-top -->
	<!--count-->
			<div class="count-agileits">
				<div id="particles-js"></div>
					
					<div class="count-grids">
					<h3 class="tittle-w3">Handling <span>your needs</span> with care</h3>
					<div class="count-bgcolor-w3ls">
						<div class="col-md-4 count-grid">
						<i class="fa fa-cutlery" aria-hidden="true"></i>
							<div class="count hvr-bounce-to-bottom">
								<div class='numscroller numscroller-big-bottom' data-slno='1' data-min='0' data-max='1052' data-delay='.5' data-increment="100">1052</div>
									<span></span>
									<h5>Products available</h5>
							</div>
						</div>
						<div class="col-md-4 count-grid">
						<i class="fa fa-users" aria-hidden="true"></i>
							<div class="count hvr-bounce-to-bottom">
								<div class='numscroller numscroller-big-bottom' data-slno='1' data-min='0' data-max='372' data-delay='.5' data-increment="100">372</div>
									<span></span>
									<h5>Clients come back</h5>
							</div>
						</div>
						<div class="col-md-4 count-grid">
						<i class="fa fa-user-plus" aria-hidden="true"></i>
							<div class="count hvr-bounce-to-bottom">
								<div class='numscroller numscroller-big-bottom' data-slno='1' data-min='0' data-max='105209' data-delay='.5' data-increment="100">105209</div>
									<span></span>
									<h5>Site members</h5>
								</div>
						</div>
						<div class="clearfix"></div>
						</div>
					</div>
			</div>
				<!--count-->
	<!--team-->
	<div class="team">
		<div class="container">
			<h3 class="tittle-w3"><span>Our </span>Chefs</h3>
			<div class="team-row">
				<div class="col-md-3 team-grids wow fadeInUp animated" data-wow-delay=".5s">
					<h5>{{ chefs[0].firstName }}<span>{{ chefs[0].lastName }}</span></h5>
					<p>{{ chefs[0].describe }}</p>
					<div class="social-bnr-agileits about-agile">
						<ul>
							<li><a href="#"><i class="fa fa-facebook" aria-hidden="true"></i></a></li>
							<li><a href="#"><i class="fa fa-twitter" aria-hidden="true"></i></a></li>
							<li><a href="#"><i class="fa fa-google-plus" aria-hidden="true"></i></a></li>
							<li><a href="#"><i class="fa fa-linkedin" aria-hidden="true"></i></a></li>					
						</ul>
					</div>
					<div class="team-img">
						<img src="{{ url_for('static', filename=images[0].imgPath) }}" alt="">
					</div>
				</div>
				<div class="col-md-3 team-grids team-mdl wow fadeInUp animated" data-wow-delay=".5s">
					<h5>{{ chefs[1].firstName }} <span>{{ chefs[1].lastName }}</span></h5>
					<p>{{ chefs[1].describe }}</p>
					<div class="social-bnr-agileits about-agile">
						<ul>
							<li><a href="#"><i class="fa fa-facebook" aria-hidden="true"></i></a></li>
							<li><a href="#"><i class="fa fa-twitter" aria-hidden="true"></i></a></li>
							<li><a href="#"><i class="fa fa-google-plus" aria-hidden="true"></i></a></li>
							<li><a href="#"><i class="fa fa-linkedin" aria-hidden="true"></i></a></li>					
						</ul>
					</div>
					<div class="team-img">
						<img src="{{ url_for('static', filename=images[1].imgPath) }}" alt="">
					</div>
				</div>
				<div class="col-md-3 team-grids team-mdl1 wow fadeInUp animated" data-wow-delay=".5s">
					<h5>{{ chefs[2].firstName }}<span>{{ chefs[2].lastName }}</span></h5>
					<p>{{ chefs[2].describe }}</p>
					<div class="social-bnr-agileits about-agile">
						<ul>
							<li><a href="#"><i class="fa fa-facebook" aria-hidden="true"></i></a></li>
							<li><a href="#"><i class="fa fa-twitter" aria-hidden="true"></i></a></li>
							<li><a href="#"><i class="fa fa-google-plus" aria-hidden="true"></i></a></li>
							<li><a href="#"><i class="fa fa-linkedin" aria-hidden="true"></i></a></li>					
						</ul>
					</div>
					<div class="team-img">
						<img src="{{ url_for('static', filename=images[2].imgPath) }}" alt="">
					</div>
				</div>
				<div class="col-md-3 team-grids wow fadeInUp animated" data-wow-delay=".5s">
					<h5>{{ chefs[3].firstName }} <span>{{ chefs[3].lastName }}</span></h5>
					<p>{{ chefs[3].describe }}</p>
					<div class="social-bnr-agileits about-agile">
						<ul>
							<li><a href="#"><i class="fa fa-facebook" aria-hidden="true"></i></a></li>
							<li><a href="#"><i class="fa fa-twitter" aria-hidden="true"></i></a></li>
							<li><a href="#"><i class="fa fa-google-plus" aria-hidden="true"></i></a></li>
							<li><a href="#"><i class="fa fa-linkedin" aria-hidden="true"></i></a></li>					
						</ul>
					</div>
					<div class="team-img">
						<img src="{{ url_for('static', filename=images[3].imgPath) }}" alt="">
					</div>
				</div>
				<div class="clearfix"> </div>
			</div>
		</div>
	</div>	
	<!--//team-->	
<!-- Footer -->

			<div class="copyright-wthree">
				<p>Copyright &copy; 2017.Company name All rights reserved.More Templates <a href="http://www.cssmoban.com/" target="_blank" title="模板之家">模板之家</a> - Collect from <a href="http://www.cssmoban.com/" title="网页模板" target="_blank">网页模板</a></p>
			</div>
<!-- //Footer -->
	<a href="#home" class="scroll" id="toTop" style="display: block;"> <span id="toTopHover" style="opacity: 1;"> </span></a>
<!-- //smooth scrolling -->
<script type="text/javascript" src="{{ url_for('static', filename='js/jquery-2.1.4.min.js') }}"></script>
<script type="text/javascript" src="{{ url_for('static', filename='js/numscroller-1.0.js') }}"></script>
<script src="{{ url_for('static', filename='js/particles.js') }}"></script>
			<script src="{{ url_for('static', filename='js/app.js') }}"></script>
<!-- Dropdown-Menu-JavaScript -->
			<script>
				$(document).ready(function(){
					$(".dropdown").hover(            
						function() {
							$('.dropdown-menu', this).stop( true, true ).slideDown("fast");
							$(this).toggleClass('open');        
						},
						function() {
							$('.dropdown-menu', this).stop( true, true ).slideUp("fast");
							$(this).toggleClass('open');       
						}
					);
				});
			</script>
		<!-- //Dropdown-Menu-JavaScript -->
 <!-- start-smoth-scrolling -->
<script type="text/javascript" src="{{ url_for('static', filename='js/move-top.js') }}"></script>
<script type="text/javascript" src="{{ url_for('static', filename='js/easing.js') }}"></script>
<script type="text/javascript">
	jQuery(document).ready(function($) {
		$(".scroll").click(function(event){		
			event.preventDefault();
			$('html,body').animate({scrollTop:$(this.hash).offset().top},1000);
		});
	});
</script>
<!-- start-smoth-scrolling -->
<!-- here stars scrolling icon -->
	<script type="text/javascript">
		$(document).ready(function() {
			/*
				var defaults = {
				containerID: 'toTop', // fading element id
				containerHoverID: 'toTopHover', // fading element hover id
				scrollSpeed: 1200,
				easingType: 'linear' 
				};
			*/
								
			$().UItoTop({ easingType: 'easeOutQuart' });
								
			});
	</script>
<!-- //here ends scrolling icon -->
<!--js for bootstrap working-->
	<script src="{{ url_for('static', filename='js/bootstrap.js') }}"></script>
<!-- //for bootstrap working -->


<!-- script-for-menu -->
					<script>					
						$("span.menu").click(function(){
							$(".top-nav ul").slideToggle("slow" , function(){
							});
						});
					</script>
					<!-- script-for-menu -->
</body>
</html>